import {
  BlockOutlined,
  CopyOutlined,
  DeleteOutlined,
  DownOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  RedoOutlined,
  UndoOutlined,
  UpOutlined,
} from "@ant-design/icons";
import { Button, Space, Tooltip } from "antd";
import { FC } from "react";
import { useDispatch } from "react-redux";
import useGetComponentInfo from "@/hooks/useGetComponentInfo";
import {
  removeSelectedComponent,
  changeComponentHidden,
  toggleComponentLocked,
  copiedComponent,
  pasteComponent,
  moveComponent,
} from "@/store/componentReducer";
import { ActionCreators } from "redux-undo";

const EditToolbar: FC = () => {
  const dispatch = useDispatch();
  const {
    selectId,
    selectedComponent,
    copiedComponent: copiedComponentInfo,
    componentList,
  } = useGetComponentInfo();
  // 如果没有选中组件，直接返回空
  if (!selectedComponent) {
    return null;
  }
  const { isLocked } = selectedComponent;

  const len = componentList.length;
  const selectIndex = componentList.findIndex((c) => c.fe_id === selectId);
  const firstIndex = selectIndex <= 1;
  const lastIndex = selectIndex >= len - 1;
  function handleDelete() {
    dispatch(removeSelectedComponent());
  }
  function handleHide() {
    dispatch(changeComponentHidden({ fe_id: selectId, isHidden: true }));
  }
  function handleLock() {
    // dispatch(changeComponentHidden({ fe_id: selectId, isLocked: true }));
    dispatch(toggleComponentLocked({ fe_id: selectId }));
  }
  //复制
  function copy() {
    dispatch(copiedComponent());
  }
  //粘贴
  function paste() {
    dispatch(pasteComponent());
  }

  //上移动下移
  function moveUp() {
    dispatch(
      moveComponent({ oldIndex: selectIndex, newIndex: selectIndex - 1 })
    );
  }
  function moveDown() {
    dispatch(
      moveComponent({ oldIndex: selectIndex, newIndex: selectIndex + 1 })
    );
  }

  //撤销重做
  function handleUndo() {
    dispatch(ActionCreators.undo());
  }
  function handleRedo() {
    dispatch(ActionCreators.redo());
  }

  return (
    <div>
      <Space>
        <Tooltip title="删除">
          <Button
            shape={"circle"}
            icon={<DeleteOutlined />}
            onClick={handleDelete}
          ></Button>
        </Tooltip>
        <Tooltip title="隐藏">
          <Button
            shape={"circle"}
            icon={<EyeInvisibleOutlined />}
            onClick={handleHide}
          ></Button>
        </Tooltip>
        <Tooltip title="锁定">
          <Button
            shape={"circle"}
            icon={<LockOutlined />}
            onClick={handleLock}
            type={!isLocked ? "default" : "primary"}
          ></Button>
        </Tooltip>
        <Tooltip title="复制">
          <Button
            shape={"circle"}
            icon={<CopyOutlined />}
            onClick={copy}
          ></Button>
        </Tooltip>
        <Tooltip title="粘贴">
          <Button
            shape={"circle"}
            disabled={!copiedComponentInfo}
            icon={<BlockOutlined />}
            onClick={paste}
          ></Button>
        </Tooltip>
        <Tooltip title="上移">
          <Button
            shape={"circle"}
            disabled={firstIndex}
            icon={<UpOutlined />}
            onClick={moveUp}
          ></Button>
        </Tooltip>
        <Tooltip title="下移">
          <Button
            shape={"circle"}
            disabled={lastIndex}
            icon={<DownOutlined />}
            onClick={moveDown}
          ></Button>
        </Tooltip>
        <Tooltip title="撤销">
          <Button
            shape={"circle"}
            icon={<UndoOutlined />}
            onClick={handleUndo}
          ></Button>
        </Tooltip>
        <Tooltip title="重做">
          <Button
            shape={"circle"}
            icon={<RedoOutlined />}
            onClick={handleRedo}
          ></Button>
        </Tooltip>
      </Space>
    </div>
  );
};

export default EditToolbar;
